<template>
    <div class="ct-bodySet">
        <el-container>
            <el-header class="bgclr-dk-sp0 mb20 headerCoster">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/mainPage/welcome' }"
                        >首页</el-breadcrumb-item
                    >
                    <el-breadcrumb-item>交换标准</el-breadcrumb-item>
                    <el-breadcrumb-item
                        ><span class="main-Clr-ft"
                            >信息查询</span
                        ></el-breadcrumb-item
                    >
                </el-breadcrumb>
            </el-header>
            <div class="pl20 pr20">
                <el-card class="mb20 cardWidth">
                    <el-form
                        :inline="true"
                        :model="formData"
                        ref="formData"
                        class="noMarginBottom"
                    >
                        <el-form-item class="mb1" label="对接系统：">
                            <el-select
                                v-model="formData.company"
                                placeholder="请选择"
                                value-key="id"
                                clearable 
                            >
                                <el-option
                                    v-for="item in company"
                                    :label="item.orgName"
                                    :value="item"
                                    :key="item.id"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item class="mb1" label="版本：">
                            <el-select
                                v-model="formData.edition"
                                placeholder="请选择"
                                clearable
                            >
                                <el-option
                                    v-for="item in edition"
                                    :label="item.value"
                                    :value="item"
                                    :key="item.code"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-button type="primary" @click="queryList()"
                            >查询</el-button
                        >
                    </el-form>
                </el-card>

        
                <el-card class="mb20 cardWidth">
                    <template>
                         <!--搜索 -->                            
                            <el-popover
                                placement="bottom"
                                trigger="click"
                            >
                                <el-input v-model="search"  placeholder="输入关键字搜索"/>
                                <el-button
                                        class="el-icon-search"
                                        type="text"
                                        size="medium"
                                        slot="reference"
                                        style="padding-right:10px"
                                >
                                    <span>搜索</span>
                                </el-button>
                            </el-popover>
                        <!--筛选 -->
                        <template v-if="model">
                            <el-popover
                                placement="bottom"
                                trigger="click"
                                width="480"
                                popper-class="screen-management-btn-popover"
                                :visible-arrow="false"
                            >
                            <div class="screen-management-header mb-10">设置筛选条件</div>
                                    <div style="padding-top:15px;width:555px">
                                    <el-form :model="dynamicValidateForm" ref="dynamicValidateForm"  :inline="true">
                                        <div v-for="(domain, index) in dynamicValidateForm.domains" :key="index" class="dv_hang" >
                                        <el-row>
                                            <el-col :span="3">
                                                <el-form-item>
                                                    <el-input
                                                        v-model="domain.conditionList1"
                                                        value="where"
                                                        disabled
                                                    >
                                                    </el-input>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="6">
                                             <el-form-item>
                                                <el-select
                                                    v-model="domain.conditionList2"
                                                    placeholder="请选择"
                                                >
                                                    <el-option
                                                        v-for="item in conditionList2"
                                                        :label="item.value"
                                                        :value="item"
                                                        :key="item.code"
                                                    >
                                                    </el-option>
                                                </el-select>
                                             </el-form-item>
                                            </el-col>
                                            <el-col :span="3">
                                                <el-form-item>
                                                    <el-input
                                                        v-model="domain.conditionList3"
                                                        value="="
                                                        disabled
                                                    >
                                                    </el-input>
                                                </el-form-item>
                                            </el-col>
                                            <el-col :span="8">
                                                <el-form-item>
                                                    <el-input
                                                        v-model="domain.conditionList4"
                                                        placeholder="请输入"
                                                        @keyup.enter.native="submitForm()"
                                                    >
                                                    </el-input>
                                                </el-form-item>
                                            </el-col>
                                            <el-button @click.prevent="removeDomain(domain)"   type="text"
                                                 size="medium" class="el-icon-close"></el-button>
                                        </el-row>
                                         </div>
                                    </el-form>
                                　　</div>
                                <el-button
                                    type="text"
                                    size="medium"
                                    @click="addDomain"
                                    class="el-icon-plus"
                                >
                                    添加条件
                                </el-button>
                                <el-button
                                    class="el-icon-caret-bottom"
                                    type="text"
                                    size="medium"
                                    slot="reference"
                                    style="padding-right:10px"
                                >
                                    <span>筛选</span>
                                </el-button>
                            </el-popover>
                        </template>
                        <!--字段管理 -->
                        <template>
                            <el-popover  
                                placement="bottom"
                                title="字段管理"
                                trigger="click">
                                <el-checkbox-group v-model="checkList" @change="columnFilter">
                                <el-checkbox v-for="(item,index) in tableList" :label="item.label">{{item.value}}</el-checkbox>
                                </el-checkbox-group>
                                <el-button class="el-icon-tickets
                                        " type="text"  size="medium" slot="reference" >
                                    <span>字段管理</span>
                                </el-button>
                            </el-popover>
                        </template> 
                         <!--表格 -->   
                        <el-table
                            ref="tableCot"
                            border
                            stripe
                            :header-cell-style="getRowClass"
                            :data="orgExcStand.filter(data => !search || data.table_Name.toLowerCase().includes(search.toLowerCase()))"
                            style="width: 100%"
                            :height="height"
                            :key="key"
                            
                        >
                            <el-table-column
                                prop="project"
                                label="项目名称"
                                width="105"
                                sortable
                                v-if="columnShow.project" 
                            >
                            </el-table-column>
                            <el-table-column
                                prop="edition"
                                label="使用标准版本"
                                width="105"
                                 v-if="columnShow.edition" 
                            >
                            </el-table-column>
                            <el-table-column
                                prop="orgName"
                                label="对接系统名称"
                                width="160"
                                 v-if="columnShow.orgName" 
                            >
                            </el-table-column>
                            <el-table-column label="标准分类">
                                <el-table-column
                                    label="一级"
                                    prop="stand_One"
                                    width="100"
                                       v-if="columnShow.stand_One" 
                                >
                                </el-table-column>
                                <el-table-column
                                    label="二级"
                                    prop="stand_Two"
                                    width="110"
                                    sortable
                                       v-if="columnShow.stand_Two" 
                                >
                                </el-table-column>
                            </el-table-column>
                            <el-table-column 
                                prop="table_Name" 
                                label="业务表" 
                                sortable   
                                v-if="columnShow.table_Name" >
                            </el-table-column>
                            <el-table-column 
                                prop="table_Code" 
                                label="表英文名"  
                                sortable  
                                v-if="columnShow.table_Code" >
                            </el-table-column>
                            <el-table-column
                                prop="file_Eof"
                                label="文件格式"
                                v-if="false"
                            >
                            </el-table-column>
                            <el-table-column label="成果物" width="95" >
                                <template slot-scope="scope">
                                    <el-button
                                        class="el-icon-download"
                                        v-if="scope.row.file_Eof != null"
                                        type="primary"
                                        size="mini"
                                        @click="handleEdit(scope.$index, scope.row)"
                                        >下载
                                    </el-button>
                                    <el-tag
                                        class="el-icon-circle-close"
                                        type="danger" 
                                        size="mini"
                                        v-if="scope.row.file_Eof == null"
                                        >暂无资源</el-tag>
                                </template>
                                  
                            </el-table-column>
                            <!--自定义无数据显示 -->
                            <div slot="empty">
                                <p>
                                    <img src="static/icon/无搜索结果.png"/>
                                </p>
                                <p style="padding-top:40px"><span>暂无数据</span></p>
                            </div>
                        </el-table>
                    </template>
                    <el-col :span="24">
                        <div><br /></div>
                    </el-col>
                </el-card>
            </div>
            <div class="bottomLayoutBus"></div>
        </el-container>
    </div>
</template>

<script>
import urlConfig from "../../../config/url.json";
import Vue from "vue";
import { Message } from "element-ui";
import download from "downloadjs";
Vue.component(Message.name, Message);
let queryOrgExcStandUrl = urlConfig.queryOrgExcStand;
let queryListOrgNameUrl = urlConfig.queryListOrgName;
let postFileDownloadNumberUrl = urlConfig.postFileDownloadNumber;
let orgExchangeStandardQueryScreenUrl = urlConfig.orgExchangeStandardQueryScreen;
export default {
    name: "",
    data() {
        return {
            model:false,
            dynamicValidateForm: {
                domains:[{
                conditionList1: '当',
                conditionList2:'',
                conditionList3:'等于',
                conditionList4:''
                }]
            },
            conditionList2:[{code:"project",value:"项目名称"},
                            {code:"stand_One",value:"标准分类一级"},
                            {code:"stand_Two",value:"标准分类二级"},
                            {code:"table_Name",value:"业务表"},
                            {code:"table_Code",value:"表英文名"}],
            key: 1, // table key
            tableList: [
                {label: 'project', value: '项目名称'},
                {label: 'edition', value: '使用标准版本'},
                {label: 'orgName', value: '对接系统名称'},
                {label: 'stand_One', value: '标准分类一级'},
                {label: 'stand_Two', value: '标准分类二级'},
                {label: 'table_Name', value: '业务表'},
                {label: 'table_Code', value: '表英文名'},
            ],      
            checkList: [],//筛选列选中的数据列表
            columnShow: {},//控制筛选列显示隐藏
            formData: {
                company: "",
                edition: "",
            },
            edition: [
                {
                    code: "1",
                    value: "v5.6.0",
                },
                {
                    code: "2",
                    value: "v5.6.1",
                },
            ],
            company: [],
            orgExcStand: [],
            spanArr1: [], // 记录每一行的合并数
            pos1: "", // 记录索引
            spanArr2: [], // 记录每一行的合并数
            pos2: "", // 记录索引
            spanArr3: [], // 记录每一行的合并数
            pos3: "", // 记录索引
            spanArr4: [], // 记录每一行的合并数
            pos4: "", // 记录索引
            spanArr5: [], // 记录每一行的合并数
            pos5: "", // 记录索引
            newArr: [],
            search:'',
            height: window.innerHeight - 159,
        };
    },
    methods: {
        //列筛选
        columnFilter(val) {
            debugger;
            if (val == undefined) {
                this.tableList.forEach(element => {
                    // 默认选中全部列
                    this.checkList.push(element.label);
                    this.columnShow[element.label] = true;
                });
            } else {
                Object.keys(this.columnShow).forEach(element => {
                    this.columnShow[element] = false;
                });
                this.checkList.forEach(element => {
                    // 判断是否有某个字段
                    if (element in this.columnShow) {
                        this.columnShow[element] = true;
                    }
                });
            }
            this.key = this.key + 1
        },
        removeDomain(item) {
            //删除行
            var index = this.dynamicValidateForm.domains.indexOf(item);
            if (index !== -1) {
                this.dynamicValidateForm.domains.splice(index, 1);
            }
        },
        addDomain() {
            //新增行
            if(this.dynamicValidateForm.domains.length == 2) {
                Message.warning("条件已达上限");
                return false;
            }
            this.dynamicValidateForm.domains.push({
                conditionList1: '当',
                conditionList2:'',
                conditionList3:'等于',
                conditionList4:''
            });
        },
        //下载
        handleEdit(index, row) {
            debugger;
            if (row.file_Eof == null) {
                Message.error("暂没资源");
            } else {
                var fileName =
                    row.project +
                    "-" +
                    row.orgName +
                    "-" +
                    row.edition +
                    "-" +
                    row.table_Name +
                    "." +
                    row.file_Eof;
                var link = "/static/org_exchange_standard/" + fileName;
                download(link);
                this.postFileDownloadNumber(fileName);
            }
        },
        //记录下载次数
        postFileDownloadNumber(filename) {
            debugger;
            let that = this;
            var username = JSON.parse(window.localStorage["loginData"])["username"];
            var groupname =  JSON.parse(that.STORAGE.getItem("groupIdList"))[0].groupName;
            var fileName = filename;
            const loading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
            });
            that.$http({
                method: "post",
                url: postFileDownloadNumberUrl,
                baseURL: "/api",
                data: {
                    groupname:groupname,
                    username: username,
                    fileName: fileName
                },
            })
                .then(function (response) {
                    if (response.data.code == 1) {
                        // that.company = response.data.data;
                    } else {
                        Message.error("更新下载次数失败");
                    }
                    loading.close();
                })
                .catch(function (err) {
                    console.log(err);
                    Message.error("更新下载次数失败");
                    loading.close();
                });
        },
        //回车筛选
        submitForm() {
            debugger
            let that = this;
            var edition = this.formData.edition.value;
            var company = this.formData.company.orgName;
            if (edition == undefined || company == undefined) {
                Message.warning("请先选择查询条件")
                return false;
            }
            var conditionList2= that.dynamicValidateForm.domains[0].conditionList2.code;
            var conditionList4 = that.dynamicValidateForm.domains[0].conditionList4;
            if(that.dynamicValidateForm.domains.length > 1) {
                    var conditionList5= that.dynamicValidateForm.domains[1].conditionList2.code;
                    if(conditionList5 == conditionList2) {
                        Message.warning("筛选条件未发生变化，请重新选择")
                        return false;
                    }
                    var conditionList6 = that.dynamicValidateForm.domains[1].conditionList4;
                    var row = that.dynamicValidateForm.domains.length;
            }
            const loading = this.$loading({
                    lock: true,
                    text: "Loading",
                    spinner: "el-icon-loading",
                });
                that.$http({
                    method: "post",
                    url: orgExchangeStandardQueryScreenUrl,
                    baseURL: "/api",
                    data: {
                        edition:edition,
                        company:company,
                        conditionList2:conditionList2,
                        conditionList4:conditionList4,
                        conditionList5:conditionList5,
                        conditionList6:conditionList6,
                        row:row
                    },
                })
                    .then(function (response) {
                        if (response.data.code == 1) {
                            that.orgExcStand = response.data.data;
                            Message.success("筛选成功");
                        } else {
                            Message.error("筛选失败");
                        }
                        loading.close();
                    })
                    .catch(function (err) {
                        console.log(err);
                        Message.error("查询失败");
                        loading.close();
                    });
        },
        queryList() {
            //查询
            let that = this;
            var edition = this.formData.edition.value;
            var company = this.formData.company.orgName;
            if (edition !== undefined && company != undefined) {
                const loading = this.$loading({
                    lock: true,
                    text: "Loading",
                    spinner: "el-icon-loading",
                });
                that.$http({
                    method: "post",
                    url: queryOrgExcStandUrl,
                    baseURL: "/api",
                    data: {
                        edition: edition,
                        company: company,
                    },
                })
                    .then(function (response) {
                        if (response.data.code == 1) {
                            that.orgExcStand = response.data.data;
                            that.model = true;
                            // if (that.spanArr1.length > 0) {
                            //     that.spanArr1.length = 0;
                            //     that.spanArr2.length = 0;
                            //     that.spanArr3.length = 0;
                            //     that.spanArr4.length = 0;
                            //     that.spanArr5.length = 0;
                            // }
                            // that.getSpanArr(that.orgExcStand);
                            Message.success("查询成功");
                        } else {
                            Message.error("查询失败");
                        }
                        loading.close();
                    })
                    .catch(function (err) {
                        console.log(err);
                        Message.error("查询失败");
                        loading.close();
                    });
            } else {
                Message.warning("请选择查询条件");
            }
        },
        // 合并行
        getSpanArr(data) {
            for (let i = 0; i < data.length; i++) {
                // 第一列
                if (i === 0) {
                    this.spanArr1.push(1);
                    this.pos1 = 0;
                } else {
                    // 判断当前元素与上一个元素是否相同
                    if (data[i].orgName === data[i - 1].orgName) {
                        this.spanArr1[this.pos1] += 1;
                        this.spanArr1.push(0);
                    } else {
                        this.spanArr1.push(1);
                        this.pos1 = i;
                    }
                }
            }
            for (let i = 0; i < data.length; i++) {
                // 第二列
                if (i === 0) {
                    this.spanArr2.push(1);
                    this.pos2 = 0;
                } else {
                    // 判断当前元素与上一个元素是否相同
                    if (
                        data[i].orgName === data[i - 1].orgName &&
                        data[i].project === data[i - 1].project
                    ) {
                        this.spanArr2[this.pos2] += 1;
                        this.spanArr2.push(0);
                    } else {
                        this.spanArr2.push(1);
                        this.pos2 = i;
                    }
                }
            }
            for (let i = 0; i < data.length; i++) {
                // 第三列
                if (i === 0) {
                    this.spanArr3.push(1);
                    this.pos3 = 0;
                } else {
                    // 判断当前元素与上一个元素是否相同
                    if (
                        data[i].orgName === data[i - 1].orgName &&
                        data[i].project === data[i - 1].project &&
                        data[i].edition === data[i - 1].edition
                    ) {
                        this.spanArr3[this.pos3] += 1;
                        this.spanArr3.push(0);
                    } else {
                        this.spanArr3.push(1);
                        this.pos3 = i;
                    }
                }
            }
            for (let i = 0; i < data.length; i++) {
                // 第四列
                if (i === 0) {
                    this.spanArr4.push(1);
                    this.pos4 = 0;
                } else {
                    // 判断当前元素与上一个元素是否相同
                    if (
                        data[i].orgName === data[i - 1].orgName &&
                        data[i].project === data[i - 1].project &&
                        data[i].edition === data[i - 1].edition &&
                        data[i].stand_One === data[i - 1].stand_One
                    ) {
                        this.spanArr4[this.pos4] += 1;
                        this.spanArr4.push(0);
                    } else {
                        this.spanArr4.push(1);
                        this.pos4 = i;
                    }
                }
            }
            for (let i = 0; i < data.length; i++) {
                // 第五列
                if (i === 0) {
                    this.spanArr5.push(1);
                    this.pos5 = 0;
                } else {
                    // 判断当前元素与上一个元素是否相同
                    if (
                        data[i].orgName === data[i - 1].orgName &&
                        data[i].project === data[i - 1].project &&
                        data[i].edition === data[i - 1].edition &&
                        data[i].stand_One === data[i - 1].stand_One &&
                        data[i].stand_Two === data[i - 1].stand_Two
                    ) {
                        this.spanArr5[this.pos5] += 1;
                        this.spanArr5.push(0);
                    } else {
                        this.spanArr5.push(1);
                        this.pos5 = i;
                    }
                }
            }
        },
        //合并行
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                // 第一列
                const _row = this.spanArr1[rowIndex];
                const _col = _row > 0 ? 1 : 0;
                return {
                    rowspan: _row,
                    colspan: _col,
                };
            }
            if (columnIndex === 1) {
                // 第二列
                const _row = this.spanArr2[rowIndex];
                const _col = _row > 0 ? 1 : 0;
                return {
                    rowspan: _row,
                    colspan: _col,
                };
            }
            if (columnIndex === 2) {
                // 第三列
                const _row = this.spanArr3[rowIndex];
                const _col = _row > 0 ? 1 : 0;
                return {
                    rowspan: _row,
                    colspan: _col,
                };
            }
            if (columnIndex === 3) {
                // 第四列
                const _row = this.spanArr4[rowIndex];
                const _col = _row > 0 ? 1 : 0;
                return {
                    rowspan: _row,
                    colspan: _col,
                };
            }
            if (columnIndex === 4) {
                // 第五列
                const _row = this.spanArr5[rowIndex];
                const _col = _row > 0 ? 1 : 0;
                return {
                    rowspan: _row,
                    colspan: _col,
                };
            }
        },
        //表头颜色
        getRowClass({ rowIndex }) {
            if (rowIndex == 0 || rowIndex == 1) {
                return "background:#2FB2B8;color: white";
            } else {
                return "";
            }
        },
        //Table高度
        getHeight() {
            let that = this;
            that.height = window.innerHeight - 159;
        },
        //查询条件
        queryListOrgName() {
            let that = this;
            const loading = this.$loading({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
            });
            that.$http({
                method: "post",
                url: queryListOrgNameUrl,
                baseURL: "/api",
            })
                .then(function (response) {
                    if (response.data.code == 1) {
                        that.company = response.data.data;
                    } else {
                        Message.error("下拉框初始化失败");
                    }
                    loading.close();
                })
                .catch(function (err) {
                    console.log(err);
                    Message.error("下拉框初始化失败");
                    loading.close();
                });
        },
    },
    mounted() {
        let that = this;
        that.queryListOrgName();
        that.columnFilter();
    },
    //自适应高度
    created() {
        let that = this;
        window.addEventListener("resize", that.getHeight);
    },
    destroyed() {
        let that = this;
        window.removeEventListener("resize", that.getHeight);
    },
};
</script>

<style scoped>
.headerCoster {
    height: 59px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.deleteButtonColor {
    color: red;
}

.submitButtonColor {
    color: green;
}

.letBorder {
    border-left: #6aabe6 solid 1px;
}

.def-el-input {
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: none;
    padding: 0 15px;
    width: 35%;
}

.cardWidth {
    width: 100%;
}
.el-select {
    width: 100%;
}
.el-popover .el-checkbox {
  display: block;
  margin-bottom: 5px;
  margin-left: 15px;
}
</style>